<template>
  <div class="cart container">
	<header>
        <i class='iconfont icon-fanhui' @click='$router.back()'></i>
        <span class='header-title'>购物车</span>
        <span class='header-text' v-if='list.length' @click='clickNavBar'>{{  isNavText ? '编辑' : '完成'  }}</span>
    </header>
	<section v-if='list.length'>
        <div class='cart-head'>
            <van-checkbox :value="checkAll" @click='checkAllFn'></van-checkbox>
            <span>商品</span>
        </div>
        <ul class='cart-list'>
            <li
                v-for='(item,index) in list'
                :key='index'
            >
                <div class='item-checked'>
                    <van-checkbox @click='checkItem(item.id)' v-model="item.checked"></van-checkbox>
                </div>
                <h3 class='item-img'>
                    <img :src="item.goods_imgUrl" alt="">
                </h3>
                <div class='item-content'>
                    <div class='item-name'>
                        <span>{{item.goods_name}}</span>
                        <i class='iconfont icon-lajitong' @click='delGoodsFn(item.id)'></i>
                    </div>
                    <div class='item-price'>
                        <span>¥</span>
                        <b>{{item.goods_price}}</b>
                    </div>
                    <div class='item-num'>
                        <van-stepper v-model="item.goods_num" integer @change='changeNum($event,item.id)'/>
                    </div>
                </div>
            </li>
        </ul>
    </section>
    <section v-else>
        <h1>暂无数据</h1>
        <span @click='$route.path("/home")'>去首页逛逛吧</span>
    </section>
    <footer v-if='list.length'>
        <div class='footer-check-all'>
            <van-checkbox :value="checkAll" @click='checkAllFn'></van-checkbox>
            <div class='total' v-show='isNavText'>
                <div>共有 <span>{{total.num}}</span> 件商品</div>
                <div>总计：<span>¥{{total.price.toFixed(2)}}</span> + <span>0茶币</span></div>
            </div>
        </div>
        <div class='order active' v-if='isNavText' @click='goOrder'>去结算</div>
        <div class='order active' v-else @click='delGoodsFn'>删除</div>
    </footer>
    <Tabbar v-else></Tabbar>
  </div>
</template>
<script>
import http from '@/common/api/request.js'
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
import Tabbar from '@/components/common/Tabbar.vue'
import { Toast } from 'vant';
export default{
	data () {
        return {
            isNavText:true
        }
    },
    components:{
        Tabbar
    },
    computed:{
      ...mapState({
          list:state=>state.cart.list,
          checkedList:state=>state.cart.checkedList,
      }),
      ...mapGetters(['checkAll','total']),
      goodsList(){
          return this.checkedList.map(id=>{
              return this.list.find(v=>v.id == id );
          })
      }
    },
    created(){
        this.getData();
    },
    methods:{
        ...mapMutations(['addCart','checkItem','initOrder']),
        ...mapActions(['checkAllFn','delGoodsFn']),
        getData(){
            http.$axios(  {
            	url:'/api/selectCart',
                method:"post",
                headers:{
                    token:true
                }
            }).then(res=>{
                //给数据，增加一个选中状态
                res.data.forEach(v=>{
                    v['checked'] = true;
                })
                this.addCart(  res.data  )
            })
        },
        //点击编辑
        clickNavBar(){
            this.isNavText = !this.isNavText;
        },
        //步进器事件
        changeNum( value , id  ){
            //发送一个请求
            http.$axios({
            	url:'/api/updateCart',
                method:"post",
                data:{
                    id,
                    changeNum:value
                }
            })
        },
        //进入我的订单页面
        goOrder(){
            if( !this.checkedList.length ){
                Toast('至少选择一件商品');
                return;
            }
            
            let newList = [];
            this.list.forEach(item=>{
                this.checkedList.filter(v=>{
                    if( v == item.id ){
                        newList.push(item)
                    }
                })
            })
            
            http.$axios({
            	url:'/api/addOrder',
                method:"post",
                headers:{
                    token:true
                },
                data:{
                    arr:newList
                }
            }).then(res=>{
                if( !res.success ) return ;
                this.initOrder( res.data  );
                //跳转到我的订单页面
                this.$router.push({
                    path:'/order',
                    query:{
                        goodsList:JSON.stringify(this.goodsList)
                    }
                });
            })
        }
    }
}
</script>
<style scoped lang='scss'>
header{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.173333rem;
    color:#fff;
    font-size:0.426666rem;
    background-color: #b0352f;
    i,.header-text{
        padding:0 0.4rem;
    }
    i{
        font-size:0.586666rem;
    }
    .header-title{
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
    
}
section{
    background-color: #f7f7f7;
    .cart-head{
        display: flex;
        padding:0.4rem;
        span{
            padding:0 0.4rem;
            font-size:0.48rem;
        }
    }
    .cart-list{
        li{
            display: flex;
            align-items: center;
            padding:0.266666rem 0;
            background-color: #FFFFFF;
            .item-checked{
                padding:0 0.4rem;
            }
            .item-img{
                img{
                    width: 1.973333rem;
                    height: 1.973333rem;
                }
            }
            .item-content{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding:0 0.4rem;
                width: 100%;
                height: 1.973333rem;
                font-size:0.373333rem;
                .item-name{
                    display: flex;
                    justify-content: space-between;
                }
                .item-price{
                    padding:0.08rem 0;
                    color:#FF0000;
                }
                .item-num{
                    text-align: right;
                }
            }
        }
    }
}
ul li + li{
    border-top:2px solid #ccc;
}
.active{
    background-color: #FF0000;
    color:#FFFFFF;
}
footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.2rem;
    border-top:2px solid #ccc;
    .footer-check-all{
        display: flex;
        justify-content: space-around;
        padding:0 0.4rem;
    }
    .total{
        padding:0 0.4rem;
        font-size:0.32rem;
        span{
            color:#FF0000;
        }
    }
    .order{
        width: 3.2rem;
        line-height: 1.2rem;
        text-align: center;
        font-size:0.426666rem;
    }
}
</style>